
//----- 自定义表单样式 -----
.form-area {
  //12删格
  $gridColumns: 12 !default;
  @for $i from 1 through  12 {
    .col-md-#{$i} {
      display: inline-block;
      float: none;
      vertical-align: top;
    }
    .col-mr-#{$i} {
      margin-right: $i/$gridColumns*100%;
    }
  }

  .form-item{
    line-height: 20px;
    word-break: break-word;
  }
  .form-ft{
    padding-left: 15px;
    margin-top: 20px;
  }

  //修改element表单部分样式
  .el-form-item {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-form-item__label {
      color: #2d2c3c;
      line-height: 20px;
      i{
        opacity: .6;
        &:hover{
          opacity: 1;
          cursor: help;
        }
      }
    }
    .el-form-item__content {
      display: table-cell;
      color: #666;
      line-height: 20px;
      width: 2000px;
    }
    .el-input {
      width: 100%;
      max-width: 210px;
    }
    .el-input__inner {
      height: 26px;
      line-height: 26px;
      padding-left: 10px;
      max-width: 210px;
    }
    .el-input-group__append, .el-input-group__prepend{
      padding: 0 8px;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 30px;
    }
    .el-input__icon, .el-cascader {
      line-height: 26px;
    }
    .el-textarea__inner {
      padding: 5px 10px;
      /*   margin-bottom: 10px;*/
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 100%;
      max-width: 210px;
    }
    .el-radio-group,.el-checkbox-group {
      margin-left: -20px;
      &> .el-radio ,&> .el-checkbox {
        margin-left: 20px;
      }
    }
    .el-checkbox,.el-radio{
      white-space: normal;
      margin-bottom: 2px;
      .el-checkbox__input,.el-radio__input{
        float: left;
        margin-top: 2px;
        vertical-align: top;
      }
      .el-checkbox__label,.el-checkbox__input{
        display: table-cell;
        line-height: 19px;
      }
    }

    .el-form-item__error {
      padding-top: 0;
    }
    .el-cascader{
      width: 100%;
      max-width: 210px;
    }
    .el-cascader__label{
      padding-left: 10px;
    }

    //复合输入框
    .select-witch-input.hasInput {
      > .el-select {
        width: 106px;
        .el-input__inner {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      > .el-input {
        width: 150px;
        margin-left: -4px;
        .el-input__inner {
          border-left: 0;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
    //上传图片-编辑
    .el-upload-list {
      max-width: 260px;
      li {
        padding-left: 10px;
        height: 70px;
        border-color: #e4e4e4;
        border-radius: 3px;
        transition:none;
        img {
          float: none;
          width: 48px;
         max-width: 48px;
          height: 48px;
          max-height: 48px;
          margin-right: 10px;
          vertical-align: middle;
          margin-left: 0;
        }
        .el-upload-list__item-name{
          display: inline-block;
          margin-right: 0;
          width:160px;
          line-height: 48px;
          vertical-align: middle;
        }
      }
    }
    //换行
    &.linefeed {
      display: block;
      .el-form-item__content {
        width: 2000px;
      }
    }
  }

  //上传图片-展示
  .show-upload {
    margin: -10px;
    li {
      display: inline-block;
      width: 25%;
      min-width: 240px;
      max-width: 300px;
      padding: 10px;
      &:after{
        display: inline-block;
        content: '';
        vertical-align: middle;
        height: 100%;
      }
      .box {
        display: block;
        width: 100%;
        height: 120px;
        padding: 6px;
        line-height: 100px;
        border: 1px solid #e4e4e4;
        overflow: hidden;
        border-radius: 3px;
        vertical-align: middle;
        text-align: center;
        img {
          max-width: 100%;
          max-height: 100%;
        }
        &:hover{
          border:1px solid #90CAFF;
          box-shadow:0 0 4px 0 rgba(24, 255, 144, 0.35);
        }
      }
      .box-file{
        padding-left: 70px;
        background-position: 15px center;
        background-repeat: no-repeat;
        p{
          display: inline-block;
          width: 100%;
          line-height: 1.5;
          padding: 0 10px;
          vertical-align: middle;
          text-align: left;
        }
      }
      $file-types:doc pdf txt xls rar mp4;
      @each $type in $file-types{
        .#{$type}{
          background-image: url(../img/#{$type}.png);
        }
      }
      .xlsx{
        background-image: url(../img/xls.png);
      }
    }
  }

  //操作
  .operation{
    >button{
      padding: 0 5px;
      border-radius: 0;
    }
  }

  //添加按钮
  .form-add{
    background: none;
    border: 1px dashed #4a89dc;
    line-height: 32px;
    width: 100%;
    font-size: 16px;
    color: #4a89dc;
    border-radius: 5px;
  }

  //关联表格、row
  .item-relevance-table,.item-relevance-row{
    >.el-form-item__content {
      display: block;
      width: 100%;
      padding-top: 10px;
      clear: both;
    }
  }
  //关联表单
  .item-relevance-form{
    >.el-form-item__label{
      display: none;
    }
  }
}

//type-表格
//显示
.show-table {
  table {
    width: 100%;
    border: 1px solid #e9e9e9;
    th {
      line-height: 40px;
      background: #fafafa;
      text-align: center;
      color: #000;
      i{
        opacity: .6;
        &:hover{
          opacity: 1;
          cursor: help;
        }
      }
    }
    tr {
      border-bottom: 1px solid #e9e9e9;
      td {
        color: #666;
        line-height: 20px;
        text-align: center;
        padding: 15px 0;
      }
    }
  }
  .no-data{
    line-height: 60px;
    text-align: center;
    color: #909399;
    border: 1px solid #e9e9e9;
    border-top: none;
  }
}
//编辑
.form-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  .tr {
    display: table-row;
    height: 30px;
    border-bottom: 1px solid #e9e9e9;
    &.active{
      background-color: #f6f6f6;
    }
    .el-form-item__label{
      position: absolute;
      left: 2px;
      top: 50%;
      margin-top: -10px;
      &:before{
        margin-right: 0;
      }
    }
  }
  .th {
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    color: #4a89dc;
    line-height: 1.2;
    padding: 12px 0;
    background: #fafafa;
  }
  .td {
    position: relative;
    float: none;
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    color: #666666;
    line-height: 20px;
    padding: 14px 10px;
    .el-form-item__content {
      display: block;
      line-height: 20px;
      padding-top: 0;
      width: auto;
    }
    .el-input, .el-input__inner {
      max-width: 140px;
      margin: 0 auto;
    }
  }
  .add {
    .td {
      padding: 12px 10px;
    }
  }
}

//type-row
.show-row {
  .tit {
    padding: 0 25px;
    float: left;
    .glyphicon-play {
      font-size: 12px;
      color: #999999;
      transform: rotate(90deg);
      margin-right: 10px;
    }
  }
  .list {
    padding: 0 30px;
    border:1px solid #e9e9e9;
    font-size:14px;
    color:#555555;
    /*margin-bottom:25px;*/
    width:100%;
    .tit {
      padding: 0 30px;
    }
    li {
      border-bottom: 1px solid #e9e9e9;
      padding-top: 25px;
      &:last-child{border-bottom:none; }
    }
    .no-data{
      padding-top: 0;
      line-height: 60px;
      text-align: center;
      color: #909399;
    }
  }
  .tags{
    margin-bottom: 20px;
    span{color: inherit}
    >.form-item {
      display: inline-block;
      line-height: 18px;
      border-radius: 5px;
      margin-right: 20px;
      font-size: 12px;
      vertical-align: top;
      padding: 0 5px;
      span:empty {
        display: none;
      }
      &:nth-child(4n+1) {
        border: 1px solid #1890ff;
        background: #1890ff;
        color: #ffffff;
      }
      &:nth-child(4n+2) {
        background: #fff2e8;
        border: 1px solid #ffbb96;
        color: #fa541c;
      }
      &:nth-child(4n+3) {
        background: #e6fffb;
        border: 1px solid #87e8de;
        color: #13c2c2;
      }
      &:nth-child(4n+4) {
        background: #f9f0ff;
        border: 1px solid #d3adf7;
        color: #722ed1;
      }
    }
  }

}
//编辑
.edit-row {
  .tit {
    padding-left: 45px;
    background: #fafafa;
    height: 42px;
    line-height: 40px;
    float: none;
    border-bottom: 1px solid #e9e9e9;
    .el-form-item__label {
      float: none;
      margin-left: -5px;
    }
    .el-form-item__content {
      display: inline-block;
      padding-top: 0;
      vertical-align: middle;
      color: #333;
      width: auto;
    }
    .form-item {
      display: inline-block;
    }
  }
  form {
    position: relative;
    border: 1px solid #e9e9e9;
    margin-bottom: 20px;
    &.active{
      background-color: #f9f9f9;
    }
  }
  .operation {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .glyphicon-play {
    position: absolute;
    line-height: 40px;
    left: 16px;
    font-size: 12px;
    color: #999999;
    transform: rotate(90deg);
  }
}

//----- 流程相关页面 -----



//标签
.el-tag {
  cursor: default;
  & + .el-tag {
    margin-left: 2px;
  }
}
.input-new-tag {
  width: 60px;
}
.button-new-tag.el-button--mini {
  padding: 6px 15px;
}

//审核页面
.type-page{
  //审核按钮栏
  .toolbar{
    margin-bottom: 20px;
    button{
      padding: 10px 20px;
      background: #f1f1f1;
      border-color: #ccc;
      border-radius: 0;
      font-size: 14px;
      &:hover{
        color: #cc3a39;
      }
    }
    .file{
      display: none;
    }
  }

  //审核列表表格
  .el-table{
    thead {
      background: #F8F8F8;
    }
    th {
      padding: 6px 0;
      text-align: center;
      font-size: 16px;
      color: #666666;
    }
    .el-table__row{
      td{
        padding: 10px 0;
        border-top: 1px solid #E0E0E0;
      }
      cursor: pointer;
    }
    &.el-table--striped .el-table__body tr.el-table__row--striped td{
      background-color: #F5F8FA;
    }
  }

  //状态
  .flow-status{
    display: block;
    margin: 0 auto;
    width: 64px;
    text-align: left;
    i{
      display: inline-block;
      width: 14px;
      height: 14px;
      padding: 2px;
      margin-right: 5px;
      background: #fff;
      border:1px solid #ddd;
      border-radius: 50%;
      vertical-align: middle;
      &:before{
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background:#ddd;
      }
    }
    &.flow-status-underway{
      i{
        border-color: #67c23a;
        &::before{
          background:#67c23a;
        }
      }
    }
/*    &.status-finish{
      border-color:#67c23a;
      i{
        background:#67c23a;
      }
    }*/
    &.flow-status-end{
      i{
        border-color: #F12020;
        &::before{
          background:#F12020;
        }
      }
    }
    &.flow-status-back{
      i{
        border-color: #F12020;
        &::before{
          background:#F12020;
        }
      }
    }
    &.flow-status-wait{
      i{
        border-color: #4397ff;
        &::before{
          background:#4397ff;
        }
      }
    }
  }

  //分页
  .el-pagination{
    margin-top: 20px;
    text-align: center;
    .btn-prev,.btn-next{
      padding: 0 4px;
      border: 1px solid #dcdfe6;
      border-radius: 3px;
      margin: 0 3px;
      min-width: 28px;
      &:hover{
        color: #cc3a39;
      }
    }
    .more{
      float: none;
    }
    .number,.more{
      @extend .btn-prev;
      font-size: 14px;
      color: #666666;
      font-weight: normal;
      &.active{
      border-color: #cc3a39;
      color: #cc3a39; }

    }
    .el-select .el-input{
      width: 82px;
    }
  }
}
